<html>
	<head>
		<title>首页</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/basic.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
		<style type="text/css">
			.swiper-pagination{
				width: 100px;
				height: 20px;
				bottom: 0 !important;
				right: 10px !important;
				text-align: right;
				padding-right: 10px;
			}
			.swiper-pagination-bullet{
				opacity: 1;
				background-color: #FFFFFF;
			}
			.swiper-pagination-bullet-active{
				background-color: #e35c23 !important;
			}
			
		</style>
	</head>
	<body>
		<header>
			<p>翼马有车</p>
		</header>
		<div class="index-content">
			<div class="index-search flex_center_start padd15">
				<span class="address flex_center_start"><img src="../image/dingwei.png"><b>杭州</b></span>
				<span class="index-search-input flex_center_start">
					<img src="../image/search2.png" />搜索品牌车型
				</span>
			</div>
			<!-- 轮播图 -->
			<div class="swiper-container" style="height: 210px;">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="../image/index_banner.png"></div>
					<div class="swiper-slide"><img src="../image/index_banner.png"></div>
					<div class="swiper-slide"><img src="../image/index_banner.png"></div>
				</div>
				<div class="swiper-pagination swiper-pagination-bullets"></div>
			</div>
			<div class="container padd15">
				<div class="nav-all flex_center_center">
					<div class="nav-list">
						<img src="../image/che.png" />
						<p>优惠购车</p>
					</div>
					<div class="nav-list">
						<img src="../image/zixun.png" />
						<p>资讯</p>
					</div>
					<div class="nav-list">
						<img src="../image/xinnengyuan.png" />
						<p>新能源</p>
					</div>
					<div class="nav-list">
						<img src="../image/xunjia.png" />
						<p>询价</p>
					</div>
				</div>
				<div class="advertise">
					<img src="../image/advertise.png" style="width: 100%;" />
				</div>
				<div class="company">
					<div class="title flex_jubetween">
						<div class="flex_center_start" style="font-size: 17px;font-weight: bold;">
							<img src="../image/Hot.png" style="width: 19px;margin-right: 5px;" />品牌
						</div>
						<div class="flex_center_start" style="font-size: 12px;color: #73717d;">
							查看更多<img src="../image/right.png" style="width: 5px;margin-left: 5px;" />
						</div>
					</div>
					<div class="company-all flex_center_start">
						<div class="company-list ">
							<img src="../image/xunjia.png" />
							<p>大众</p>
						</div>
						<div class="company-list ">
							<img src="../image/xunjia.png" />
							<p>大众</p>
						</div>
						<div class="company-list ">
							<img src="../image/xunjia.png" />
							<p>大众</p>
						</div>
						<div class="company-list ">
							<img src="../image/xunjia.png" />
							<p>大众</p>
						</div>
						<div class="company-list ">
							<img src="../image/xunjia.png" />
							<p>大众</p>
						</div>
						<div class="company-list ">
							<img src="../image/xunjia.png" />
							<p>大众</p>
						</div>
					</div>
				</div>
				<div class="company group">
					<div class="title flex_jubetween">
						<div class="flex_center_start" style="font-size: 17px;font-weight: bold;">
							<img src="../image/Hot.png" style="width: 19px;margin-right: 5px;" />热门团购
						</div>
						<div class="flex_center_start" style="font-size: 12px;color: #73717d;">
							更多热门团购<img src="../image/right.png" style="width: 5px;margin-left: 5px;" />
						</div>
					</div>
					<div class="group-all flex_center_start">
						<div class="group-list">
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
							<div class="info">
								<h3>奥迪A4L</h3>
								<p>本期<b>6590</b>人已报名</p>
								<button>去报名</button>
							</div>
						</div>
						<div class="group-list">
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
							<div class="info">
								<h3>奥迪A4L</h3>
								<p>本期<b>6590</b>人已报名</p>
								<button>去报名</button>
							</div>
						</div>
						<div class="group-list">
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
							<div class="info">
								<h3>奥迪A4L</h3>
								<p>本期<b>6590</b>人已报名</p>
								<button>去报名</button>
							</div>
						</div>
					</div>
				</div>
				<div class="company service">
					<div class="title flex_jubetween">
						<div class="flex_center_start" style="font-size: 17px;font-weight: bold;">
							<img src="../image/Hot.png" style="width: 19px;margin-right: 5px;" />热门资讯
						</div>
						<div class="flex_center_start" style="font-size: 12px;color: #73717d;">
							更多资讯<img src="../image/right.png" style="width: 5px;margin-left: 5px;" />
						</div>
					</div>
					<div class="service-all">
						<div class="service-list flex_center_start">
							<div class="info">
								<h3 class="twoline">目标中国与北美 路虎将推卫士130车型</h3>
								<p class="flex_jubetween"><span>绝美男神</span><span>8792浏览</span></p>
							</div>
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
						</div>
						<div class="service-list flex_center_start">
							<div class="info">
								<h3 class="twoline">目标中国与北美</h3>
								<p class="flex_jubetween"><span>绝美男神</span><span>8792浏览</span></p>
							</div>
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				autoplay:true,
				pagination: {
				        el: '.swiper-pagination',
				      }
			});
		</script>
	</body>
</html>